<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{
            background-image: url(./images/tree.png);
            background-repeat: no-repeat;
            background-position: top right;
            background-attachment: scroll;
        } */
        .box1 span{
            background-color: aquamarine;
        }
        .box2 {
            overflow: hidden;
            border: 1px solid #000;
        }
        .box2 div{
            float: left;
            margin-left: 25px;
        }
        .a{
            width: 200px;
            height: 100px;
            border: 1px solid #e1e1e1;
            background-image: url(./images/balloons.jpg)
        }
        .b{
            width: 200px;
            height: 100px;
            border: 1px solid #e1e1e1;
            background-image: url(./images/star.png);
        }
        .box3,
        .box4,
        .box5 {
            border: 1px solid #000;
            padding: 0 20px 20px;
        }

        .box4 div {
            width: 400px;
            height: 300px;
            border: 1px solid #e1e1e1;
            background-repeat: no-repeat;
        }
        .box5 div{
            background-repeat: no-repeat;
        }
       
    </style>
</head>
<body>
    <h3>背景颜色：background-color</h3>
    <div class="box1">
        <p>尝试将span元素的背景色修改<span>我是span内部的内容</span></p>
    </div>

    <br>
    <h3>背景图片：background-image</h3>   
    <p>两个一样大小的盒子，第一个是比盒子大的背景图像，第二个比盒子小的背景图像。</p>
    <p>默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。</p>
    <div class="box2">
        <div class="a"></div>
        <div class="b"></div>
    </div>
    <br>
    <h3>控制图像平铺: background-repeat</h3>
    <p>background-repeat属性值，不同值展示不一样的效果</p>
    <div class="box3">
        <h4>no-repeat，不重复</h4>
        <div class="b" style="background-repeat: no-repeat;"></div>
        <h4>repeat-x，水平重复</h4>
        <div class="b" style="background-repeat: repeat-x;"></div>
        <h4>repeat-y，垂直重复</h4>
        <div class="b" style="background-repeat: repeat-y;"></div>
        <h4>repeat，两个方向重复</h4>
        <div class="b" style="background-repeat: repeat;"></div>
    </div>
    <h3>控制图像大小: background-size</h3>
    <p>可选择值有数值大小或百分比，关键字cover, contain。为了展示，我先设置了background-repeat：no-repeat;</p>
    <div class="box4">
        <h4>数字大小：backgroud-size: 100px 160px;</h4>
        <div class="a" style="background-size: 100px 160px"></div>
        <h4>关键字cover：background-size: cover</h4>
        <div class="a" style="background-size: cover;"></div>
        <h4>关键字contain: background-size: contain</h4>
        <div class="a" style="background-size: contain;"></div>
    </div>
    <br>
    <h3>控制图像位置：background-position</h3>
    <div class="box5">
        <h4>background-position: center center;</h4>
        <div class="b" style="background-position: center center;"></div>
        <h4>background-position: 20px 10%</h4>
        <div class="b" style="background-position: 20px 10%;"></div>
        <h4>background-position: center 20px</h4>
        <div class="b" style="background-position: center 20px;"></div>
        <h4>background-position: top 20px right 10px</h4>
        <div class="b" style="background-position: top 20px right 20px;"></div>
    </div>
    <br>
    <h3>背景附着：background-attachment</h3>
    <p>该属性值有两个值：值为scroll，则当页面滚动时，背景会移动。值为fixed时，背景被固定在可视窗口固定位置。</p>
</body>
</html>